<template>
  <div>
    <SearchBar v-model:show="show"></SearchBar>
    <teleport to="body">
      <Dialog v-if="show" v-model:show="show"></Dialog>
    </teleport>
    <List></List>
  </div>
</template>

<script lang="ts">
import { 
  defineComponent,
  ref,
  computed,
  onMounted
} from 'vue'

import SearchBar from './SearchBar.vue'
import Dialog from './Dialog.vue'
import List from './List.vue'

import { useStore } from 'vuex'
import { key } from '../store/index'

export default defineComponent({
  components: {
    SearchBar,
    Dialog,
    List
  },

  setup() {
    const show = ref<boolean>(false)
    const store = useStore(key)

    const list = computed(() => store.state.l.list)

    onMounted(() => {
      if (store.state.l.list.length === 0) {
        store.commit('l/loadList')
      } 
    })

    return {
      show,
      list
    }
  }
})
</script>

<style lang='stylus' scoped>

</style>